<%--
  Created by IntelliJ IDEA.
  User: dhd
  Date: 2024/9/5
  Time: 8:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<html>
<head>
    <title>编辑书籍</title>
</head>
<body>
<div>
    <div><h2 id="tt">新增图书</h2></div>
    <div>
        <form>
            <input type="hidden" id="bookId">
            <div>书籍名称：<input type="text" placeholder="请输入书籍名称" id="bookName" name="bookName"></div>
            <div>作者：<input type="text" placeholder="请输入作者名称" id="author" name="author"></div>
            <div>出版社：<input type="text" placeholder="请输入出版社" id="publisher" name="publisher"></div>
            <div>出版时间：<input type="Date" placeholder="请输入出版时间" id="publisherDate" name="publisherDate"></div>
            <div>书籍数量：<input type="text" placeholder="请输入书籍数量" id="stockQuantity" name="stockQuantity"></div>
            <div>描述：<input type="text" placeholder="请输入描述" id="description" name="description"></div>
            <div>封面：<input type="file" id="coverImage" name="coverImage"></div>
            <div><img id="img" width="200px" height="150px"></div>
            <div>
                <button onclick="save()">提交</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script>
    $(function () {
        let id = sessionStorage.getItem("id");
        console.log(id);
        if (id != '' && id != null) {
            $('#tt').text('编辑图书');
            $('#bookId').val(id);
            //获取详情
            detail(id);
        }
    })

    /*详情*/
    function detail(id) {
        let opr = 'detail';
        let data = {
            id,
            opr
        }
        $.ajax({
            url: '${pageContext.request.contextPath}/book.action',
            type: 'post',
            data: data,
            dataType: 'json',
            success: bookDetail,
            error: function () {
                alert("查询失败!请联系管理员");
            }
        })
    }

    function bookDetail(data) {
        console.log(data);
        $("#bookName").val(data.bookName);
        $("#author").val(data.author);
        $("#publisher").val(data.publisher);
        $("#publisherDate").val(data.publisherDate);
        $("#stockQuantity").val(data.stockQuantity);
        $("#description").val(data.description);
        if (data.coverImage != null) {
            $('#img').attr('src',data.coverImage);
        }
    }


    function save() {
        //阻止form表单的默认行为
        event.preventDefault();
        let opr = 'edit';
        let bookId =$('#bookId').val();
        let bookName = $("#bookName").val();
        let author = $("#author").val();
        let publisher = $("#publisher").val();
        let publisherDate = $("#publisherDate").val();
        let stockQuantity = $("#stockQuantity").val();
        let description = $("#description").val();
        //头像
        let coverImage = $("#coverImage")[0].files[0];

        book = {opr,bookId, bookName, author, publisher, publisherDate, stockQuantity, description, coverImage}

        let formData = new FormData();

        $.each(book, function (key, value) {
            formData.append(key, value);
        })
        $.ajax({
            url: '${pageContext.request.contextPath}/book.action',
            type: 'post',
            data: formData,
            dataType: 'json',
            processData: false,  //告诉jQuery不要处理数据
            contentType: false,  //告诉jQuery不要设置ContentType头部
            success: function (resp) {
                //处理服务器的响应
                console.log(resp);
                if (resp.code == 200) {
                    //
                    alert("编辑成功！！");
                    //清空表单数据
                    //跳转到书籍列表页面
                    window.location.href = "Book.jsp";
                }
            },
            error: function () {
                //处理错误
                alert("保存失败！");
                //清空表单数据
            }
        })

        console.log(book);
    }

    /*图片预览功能*/
    $("#coverImage").on('change', function () {
        let file = this.files[0];
        //进一步防止文件类型错误
        if (!/image\/\w+/.test(file.type)) {
            alert("看清楚，这个需要图片")
            return false;
        }
        $('#img').attr('src', URL.createObjectURL(file));
    })
</script>
